<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 流式聊天测试</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
            color: #333;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .chat-form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .input-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .query-input {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        /* 新增下拉框样式适配 */
        .query-input.select {
            padding: 8px 12px;
            height: 40px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8"><path fill="none" stroke="#64748b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1l6 6 6-6"/></svg>') no-repeat right 12px center;
            background-size: 14px 8px;
        }

        .submit-btn {
            padding: 12px 24px;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        .submit-btn:hover {
            background: #1976D2;
        }

        .chat-form .input-group:not(:first-child) {
            margin-top: 15px;
        }

        .response-container {
            margin-top: 30px;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 10px;
            min-height: 200px;
            overflow-y: auto;
            font-size: 16px;
            line-height: 1.6;
        }

        .streaming-text {
            white-space: pre-wrap;
            animation: typing 0.5s steps(4, end);
        }

        @keyframes typing {
            from {
                width: 0;
            }
        }

        .error {
            color: #e53935;
            margin-top: 10px;
        }

        .loading {
            animation: blink 1s infinite;
        }

        @keyframes blink {
            50% {
                opacity: 0.3;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>AI 流式聊天测试</h1>

        <form class="chat-form">
            <!-- 动态切换的输入组 -->
            <div class="input-group" id="queryInputGroup">
                <input type="text" class="query-input" id="query" placeholder="输入你的问题..." name="query" required>
                <div class="checkbox">
                    <input type="checkbox" id="streamCheck">
                    <label for="streamCheck">流式响应</label>
                </div>
            </div>

            <!-- 删除: <div class="input-group" id="fileInputGroup" style="display: none;">
                <input type="file" class="query-input" id="fileInput" placeholder="选择文件..." name="file" required>
            </div> -->

            <!-- URL选择器 -->
            <div class="input-group">
                <select class="query-input select" id="urlSelect">
                    <option value="http://localhost:8000/llm/chat">基础聊天接口</option>
                    <option value="http://localhost:8000/llm/chatPlus">增强版聊天接口</option>
                    <!-- 删除: <option value="http://localhost:8000/common/upload">文件上传接口</option> -->
                </select>
            </div>

            <div class="input-group">
                <input type="text" id="sessionIdInput" class="query-input" placeholder="Session ID（默认：1）"
                    name="sessionId">
            </div>
            <div class="input-group">
                <input type="text" id="knowledgeBaseIdInput" class="query-input" placeholder="知识库ID（默认：1）"
                    name="knowledgeBaseId">
            </div>

            <!-- 新增模型选择器 -->
            <div class="input-group">
                <select class="query-input select" id="modelSelect">
                    <option value="qwen-plus">Qwen-Plus</option>
                    <option value="qwen-max">Qwen-Max</option>
                    <option value="qwen-turbo">Qwen-Turbo</option>
                </select>
            </div>

            <button type="submit" class="submit-btn">发送请求</button>
        </form>

        <div class="response-container" id="responseContainer">
            <div id="responseText"></div>
            <div id="statusMessage" class="loading" style="display:none">正在处理...</div>
            <div id="errorMessage" class="error" style="display:none"></div>
        </div>
    </div>

    <script>
        // 初始化时隐藏文件输入

        // 监听URL选择变化
        document.getElementById('urlSelect').addEventListener('change', function () {
            const selectedUrl = this.value;
            const queryInput = document.getElementById('queryInputGroup');
            const streamCheck = document.getElementById('streamCheck');

            if (selectedUrl === 'http://localhost:8000/common/upload') {
                streamCheck.style.display = 'none'; // 文件上传不需要流式响应
            } else {
                queryInput.style.display = 'flex';
                streamCheck.style.display = 'block';
            }
        });

        document.querySelector('.chat-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            console.log("表单提交触发");
            const selectedUrl = document.getElementById('urlSelect').value;
            const stream = document.getElementById('streamCheck').checked;

            // 根据选择的URL动态处理表单控件
            if (selectedUrl === 'http://localhost:8000/common/upload') {
            } else {
                const queryInput = document.getElementById('query');
                const query = queryInput.value.trim();
                if (!query) return alert('请输入问题');
                // 确保文本输入控件是启用的
                queryInput.disabled = false;
            }

            // 重置状态
            document.getElementById('responseText').textContent = '';
            document.getElementById('statusMessage').style.display = 'block';
            document.getElementById('errorMessage').style.display = 'none';

            try {
                const headers = {
                    'sessionId': document.getElementById('sessionIdInput').value || 1,
                    'knowledgeBaseId': document.getElementById('knowledgeBaseIdInput').value || 1
                };

                let body;
                if (selectedUrl === 'http://localhost:8000/common/upload') {
                } else {
                    headers['Content-Type'] = 'application/json';
                    body = JSON.stringify({
                        question: document.getElementById('query').value,
                        stream: stream,
                        model_name: document.getElementById('modelSelect').value // 获取选中的模型
                    });
                }

                const response = await fetch(selectedUrl, {
                    method: 'POST',
                    headers: headers,
                    body: body
                });

                if (!response.ok) throw new Error('请求失败');

                if (selectedUrl === 'http://localhost:8000/common/upload') {
                } else if (stream) {
                    const reader = response.body.getReader();
                    let content = '';
                    while (true) {
                        const { done, value } = await reader.read();
                        if (done) break;
                        const chunk = new TextDecoder().decode(value);
                        content += chunk;
                        document.getElementById('responseText').textContent = content;
                    }
                } else {
                    const data = await response.json();
                    document.getElementById('responseText').textContent = data.data;
                }

                document.getElementById('statusMessage').style.display = 'none';
            } catch (error) {
                document.getElementById('errorMessage').textContent = `请求失败：${error.message}`;
                document.getElementById('errorMessage').style.display = 'block';
            } finally {
                document.getElementById('statusMessage').style.display = 'none';
                // 恢复文本输入控件的状态
                document.getElementById('query').disabled = false;
            }
        });
    </script>
</body>

</html>

